<template>
    <!-- 进度条 -->
    <span class="progress">
        <a-progress
            :stroke-color="displayInfo.progressColor"
            :stroke-width="storeWidth"
            :percent="percentNum"
            :show-info="showInfo"
            :style="{
                '--progressBackColor': progressBackColor,
                '--progressTextColor': progressTextColor,
                '--progressFontSize': progressFontSize,
                '--progressFontWeight': progressFontWeight,
                '--progressFontStyle': progressFontStyle,
                '--progressTextDecoration': progressTextDecoration
            }"
        >
        <template #format="percent">
            <span :style='progressTextAlign' >{{ percent }}</span>
          </template>
        </a-progress>
    </span>
</template>
<script>
    import { computed, defineComponent } from 'vue'

    export default defineComponent({
        name: 'ListProgress',
        props: {
            displayInfo: {
                type: Object,
                default: () => ({})
            },
            text: {
                type: [String, Number],
                default: () => {
                    return ''
                }
            }
        },
        setup(props) {
            const defaultValue = 0
            const oneHundred = 100
            const sizeTypeNum = {
                big: 15,
                centre: 10,
                small: 5
            }
            const percentNum =
                parseFloat(props.text).toString() === 'NaN'
                    ? defaultValue
                    : props.text > oneHundred
                    ? oneHundred
                    : props.text // 判断当前字段名返回类型是数字还是字符串 数字默认除100 字符串显示默认进度值0

            // 进度条尺寸大小
            const storeWidth = computed(() => {
                return sizeTypeNum[props.displayInfo.sizeType]
            })
            // 进度条背景颜色
            const progressBackColor = computed(() => {
                return props.displayInfo.progressBackColor
            })
            const progressTextStyle = computed(() => {
                return props.displayInfo.progressTextStyle || {}
            })
            // 进度文本颜色
            const progressTextColor = computed(() => {
                return progressTextStyle.value.color
            })
            // 进度文本字体大小
            const progressFontSize = computed(() => {
                return `${progressTextStyle.value.fontSize}px`
            })
            // 进度文本字体加粗
            const progressFontWeight = computed(() => {
                return progressTextStyle.value.bold ? 'bold' : 'normal'
            })
            // 进度文本字体斜体
            const progressFontStyle = computed(() => {
                return progressTextStyle.value.italic ? 'italic' : 'initial'
            })
            // 进度文本字体下划线
            const progressTextDecoration = computed(() => {
                return progressTextStyle.value.underline ? 'underline' : 'none'
            })
            // 进度文本字体下划线
            const progressTextAlign = computed(() => {
              return  {
                textAlign: progressTextStyle?.value?.align ? progressTextStyle.value.align.replace('ALIGN_', '') : 'left',
                display: 'inline-block',
                width: '100%'
              }
            });
            // 是否显示进度文本
            const showInfo = computed(() => {
                return props.displayInfo.showInfo
            })
            return {
                progressBackColor,
                progressTextColor,
                progressFontSize,
                progressFontWeight,
                progressFontStyle,
                progressTextDecoration,
                progressTextAlign,
                storeWidth,
                showInfo,
                percentNum
            }
        }
    })
</script>

<style lang="less" scoped>
    .progress :deep(.@{ant-prefix}-progress-inner) {
        background-color: var(--progressBackColor);
    }

    .progress :deep(.@{ant-prefix}-progress-text) {
        color: var(--progressTextColor);
        font-size: var(--progressFontSize);
        font-weight: var(--progressFontWeight);
        font-style: var(--progressFontStyle);
        text-decoration: var(--progressTextDecoration);
    }
</style>
